<script setup>
const radio = ref('0')
const city = ref('1')
const num = ref(1)
const value1 = ref('')
const options = [
  {
    value: '足球',
    label: '足球',
  },
  {
    value: '篮球',
    label: '篮球',
  },
  {
    value: '排球',
    label: '排球',
  },
  {
    value: '乒乓球',
    label: '乒乓球',
  },
]
const value2 = ref('')
const options2 = [
  {
    label: '球类',
    options: [
      {
        value: '足球',
        label: '足球',
      },
      {
        value: '篮球',
        label: '篮球',
      },
      {
        value: '排球',
        label: '排球',
      },
      {
        value: '乒乓球',
        label: '乒乓球',
      },
    ],
  },
  {
    label: '休闲',
    options: [
      {
        value: '游泳',
        label: '游泳',
      },
      {
        value: '散步',
        label: '散步',
      },
    ],
  },
]
const value3 = ref('')
const data = ref([
  {
    value: '父1',
    label: '运动',
    children: [
      {
        value: '子1',
        label: '足球',
      },
      {
        value: '子2',
        label: '篮球',
      },
    ],
  },
  {
    value: '父2',
    label: '休闲',
    children: [
      {
        value: '子1',
        label: '游戏',
      },
      {
        value: '子2',
        label: '魔方',
      },
    ],
  },
])
</script>

<template>
  <div class="ml-4 mt-4">
    <el-radio v-model="radio" label="0">男</el-radio>
    <el-radio v-model="radio" label="1">女</el-radio>
    <div class="mt-4">
      <el-radio-group v-model="radio">
        <el-radio label="1">选项1</el-radio>
        <el-radio label="2">选项2</el-radio>
        <el-radio label="3">选项3</el-radio>
        <el-radio label="4">选项4</el-radio>
      </el-radio-group>
    </div>
    <div class="mt-4">
      <el-radio-group v-model="city" size="large">
        <el-radio-button label="1">北京</el-radio-button>
        <el-radio-button label="2">上海</el-radio-button>
        <el-radio-button label="3">广州</el-radio-button>
        <el-radio-button label="4">深圳</el-radio-button>
      </el-radio-group>
    </div>
    <div class="mt-4">
      <el-checkbox label="1" v-model="checkBox">A</el-checkbox>
      <el-checkbox label="2" v-model="checkBox">B</el-checkbox>
      <el-checkbox label="3" v-model="checkBox">C</el-checkbox>
      <el-checkbox label="4" v-model="checkBox">D</el-checkbox>
    </div>
    <div class="mt-4">
      <el-checkbox-group v-model="checkBox" :min="1" :max="3">
        <el-checkbox label="1">A</el-checkbox>
        <el-checkbox label="2">B</el-checkbox>
        <el-checkbox label="3">C</el-checkbox>
        <el-checkbox label="4">D</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="mt-4">
      <el-input
        v-model="value"
        placeholder="请输入内容"
        :disabled="false"
        :show-password="true"
        :clearable="true"
        prefix-icon="el-icon-search"
        type="text"
      >
      </el-input>
      <el-input v-model="value" type="text">
        <template #prepend>Http://</template>
        <template #append>.com</template>
      </el-input>
      <el-input-number :min="1" :max="10" :step="1" v-model="num"></el-input-number>
      <el-select :multiple="true" :clearable="true" v-model="value1">
        <el-option
          v-for="item in options"
          :value="item.value"
          :label="item.label"
          :key="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="value2"
        :multiple="true"
        :filterable="true"
        :allow-create="true"
        :default-first-option="true"
        placeholder="请选择"
      >
        <el-option-group v-for="group in options2" :key="group.label" :label="group.label">
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-option-group>
      </el-select>
      <el-cascader
        v-model="value3"
        :options="data"
        :props="{ expandTrigger: 'hover' }"
      ></el-cascader>
    </div>
  </div>
</template>
